<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
            <li>
                <input type="checkbox" checked="false" />
                <span>第一条信息</span>
                <a href="javascript:;" class="collect">收藏</a>
                <a href="javascript:;" class="cancelCollect">取消收藏</a>
                <a href="javascript:;" class="remove">删除</a>
            </li>
        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" />
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
    <script>
        document.querySelector("input").checked = false;
        // document.querySelector("input").setAttribute("checked",true);
        var data = [{
            id: 0,
            title: "残酷月光 - 费启鸣",
            checked: true,
            collect: true,
        }, {
            id: 1,
            title: "兄弟 - 艾热",
            checked: false,
            collect: false,
        }, {
            id: 2,
            title: "毕生 - 夏增祥",
            checked: false,
            collect: true,
        }, {
            id: 3,
            title: "公子向北去 - 李春花",
            checked: false,
            collect: false,
        }, {
            id: 4,
            title: "战场 - 沙漠五子",
            checked: true,
            collect: false, //是否收藏 true 收藏 false 没有收藏
        }, ];
        // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
        // 5.收藏和取消收藏功能
        // 先修改数据在渲染视图；

        // 1.渲染视图
        function renderDom(data) {
            // 通过data数据生成dom结构
            var listEle = document.querySelector("#list");
            listEle.innerHTML = "";
            data.forEach(function(item) {
                var liEle = document.createElement("li");
                liEle.innerHTML = ` <input type="checkbox" ${
            item.checked ? "checked" : ""
          } />
          <span>${item.title}</span>
          ${
            item.collect
              ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>'
              : '<a href="javascript:;" class="collect">收藏</a>'
          }
          <a href="javascript:;" class="remove">删除</a>`;
                listEle.appendChild(liEle);
            });
            addEvent();
        }
        renderDom(data);
        // 2.绑定事件添加操作功能
        function addEvent() {
            var lis = document.querySelectorAll("#list li");
            lis.forEach(function(li, key) {
                // 不用事件委托 需要做判断；判断如果有元素 才能绑定事件；
                // var cancelCollectEle = li.querySelector(".cancelCollect");
                // console.log(cancelCollectEle)
                // // if (cancelCollectEle) {
                // //   cancelCollectEle.onclick = function () {
                // //     console.log(1111);
                // //   }
                // // }
                // cancelCollectEle && (cancelCollectEle.onclick = function(){
                //     console.log(111);
                // })

                // 通过事件委托来实现事件的绑定
                li.onclick = function(e) {
                    var target = e.target;
                    // 取消收藏
                    if (target.className == "cancelCollect") {
                        console.log("点击了取消收藏按钮");
                        //改变数据里对应的状态；
                        // console.log(key);
                        data[key].collect = false;
                        // 渲染视图；
                        renderDom(data);
                    }
                    // 点击收藏
                    if (target.className == "collect") {
                        console.log("点击了收藏按钮");
                        data[key].collect = true;
                        renderDom(data);
                    }

                    // 删除按钮
                    if (target.className == "remove") {
                        data.splice(key, 1);
                        renderDom(data);
                    }

                    // 勾选 选中和取消操作；
                    if (target.nodeName == "INPUT") {
                        //  console.log(target.checked)
                        // 把勾选的状态和数据同步一致；
                        data[key].checked = target.checked;
                        console.log(data);
                        isCheckAll();
                    }
                    // console.log(target.nodeName)
                };
            });
        }

        // 获取全选按钮
        var checkallEle = document.querySelector("#checkAll");
        checkallEle.onclick = function() {
            // console.log(this.checked);
            var that = this;
            data.forEach(function(item) {
                item.checked = that.checked;
            });
            renderDom(data);
        };

        // 判断是否全选
        function isCheckAll() {
            var res = data.every(function(item) {
                return item.checked;
            });
            checkallEle.checked = res;
        }

        // 删除勾选中的音乐
        var delEle = document.querySelector("#remove");
        delEle.onclick = function() {
            var res = data.filter(function(item) {
                return !item.checked;
            });

            data = res;
            // console.log(res);
            renderDom(data);
        };

        // 添加音乐操作；
        var addEle = document.querySelector("#add");
        var addInput = document.querySelector("#newInfo");
        addEle.onclick = function() {
            var value = addInput.value;
            var obj = {
                // id:data[data.length-1].id+1,
                id: data.length,
                title: value,
                checked: false,
                collect: false,
            };
            // console.log(obj);
            data.push(obj);
            // console.log(data);
            renderDom(data);
        };
        // var a=10;
        // var obj = {
        //   name: "张三",
        //   age: 19
        // }
        /* 
      1,2,3,4,5,9,10,34,35
      eslint
    */
    </script>
</body>

</html>